<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>统一地图平台API</title>
    <meta name="keywords" content="统一地图平台api">
    <meta name="description" content="统一地图平台api">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link href="./../script/api.css" rel="stylesheet">
</head>

<body class="restdemo-page">
    <div class="page_wrapper">
        <div data-tpl="" class="content-sidebar has_right">
            <div class="content">
                <div class="crumbs">
                    您现在的位置：
                    <a>开发</a>
                    &gt;
                    <a>地图JS API</a>
                    &gt;
                    <a>使用默认ajax请求</a></div>
                <article>
                    <h1 class="title">
                        配置ajax请求
                        <span class="update-time">最后更新时间: 2020年04月30日</span>
                    </h1>
                    <div>
                        <div class="md-container">
                            <p>JS API需和各类后台服务进行交互，就需要使用到ajax请求库。考虑到JS API集成到类似于Angular,
                                Vue等成熟框架中，同时这些框架都有自己的ajax请求库。为了减少ajax请求库资源，JS API实现了与ajax请求库的分离。同时提供了默认的ajax请求库。</p>
                            <h2>一、配置默认ajax请求</h2>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="html hljs xml">
     var amap = null;
        map.Factory.create('mapui', {
            // mapbox样式
            style: 'mapbox://styles/mapbox/outdoors-v10',
            center: [110.32343, 19.99401],
            zoom: 11,
            strategy: ['mapboxgl', 'openlayers', 'leaflet'],
            fullExtent: {
                xmin: 108.23365,
                ymin: 17.95253,
                xmax: 111.78395,
                ymax: 20.13104
            },
            http:true //开启默认ajax请求
        }, (o) => {
            amap = o;
        });
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <h2>第二步、自定义Ajax请求</h2>
                            <p>注册自定义请求服务</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
        map.HttpService.get = 自定义get请求服务;
        map.HttpService.post =自定义post请求服务;
        map.HttpService.put = 自定义put请求服务;
        map.HttpService.delete = 自定义delete请求服务;
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <h2>HttpService 服务类</h2>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
    // get远程方法
    static get(url: string, success: Function, fail: Function) {
        ...
    }

    // post远程方法
    static post(url: string, data: any, success: Function, fail: Function) {
        ...
    }

    // put远程方法
    static put(url: string, data: any, success: Function, fail: Function) {
        ...
    }

    // delete远程方法
    static delete(url: string, success: Function, fail: Function) {
        ...
    }
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</body>

</html>